<template>
  <div class="crs-container">
    <div class="img1-container">
      <img src="@assets/img/crs/img1.jpg" class="hidden-xs"/>
      <img src="@assets/img/crs/img1-wap.jpg" class="visible-xs-inline" />
    </div>

    <div class="text2-container anitmate-container">
      <div class="area1">
        <div class="text1 title">Social Responsibility</div>
        <div class="text2 title">Welfare to employees</div>
        <div class="text">
          Employee- centric corporate culture, making welfare
          for employees’ material and spirit.
          Everyone can live out the meaning of life in their work.
        </div>
      </div>
      <div class="area2">
        <div class="text2 title">
          Contribution to society
        </div>
        <div class="text">
          Through systematic reforms and keeping the step of
          social progress. Accurately grasp the application of energy-saving, environment protection and safety
          intelligent technology. To realize the common progress of the whole value chain.
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="area3 title text-center">Public Benefit Activities</div>
      <div class="area4 title text-center">
        “Hand-in-Hand·Refine Action- Let Children Not be Alone”
      </div>
    </div>
    <div class="paddingwap anitmate-container">
      <img src="@assets/img/crs/img2.jpg" />
    </div>

    <div class="text3-container clearfix anitmate-container">
      <div class="area1 pull-left">
        Since 2013, Anhui Radio and TELEVISION Station and JAC
        have jointly launched a public benefit activity named
        "Hand-in-Hand,Refine Action--Let Children Not be Alone",
        focusing on the healthy growth of left-behind children.Until
        now, the public benefit activity of JAC "Hand-in-Hand,Refine Action -- Let Children Not be Alone" has been held for
        seven seasons, providing warmth and care to more than
        5,000 left-behind children.
      </div>
      <div class="area2 pull-right hidden-xs">
        For seven consecutive seasons,"Hand-in-Hand,Refine Action--Let Children Not be Alone"shows JAC's care for the
        young generation, and is the best portrayal of JAC's positive return to the society and fulfillment of its social
        responsibilities.,"Hand-in-Hand,Refine Action--Let Children Not be
        Alone" is like a bright light, which not only satisfies the children's desire for companionship, but also lights up the heart
        of every left-behind child and illuminates their way forward.
      </div>
    </div>
    <div class="img4-container anitmate-container">
      <div class="left animate-img">
        <img src="@assets/img/crs/img4-1.jpg" />
      </div>
      <div class="mid animate-img">
        <img src="@assets/img/crs/img4-2.jpg" />
      </div>
      <div class="right animate-img">
        <img src="@assets/img/crs/img4-3.jpg" />
      </div>
    </div>
    <div class="img5-container anitmate-container clearfix">
      <div class="title-common">
        JAC Makes Contribution by Offering Assistance Proactively
      </div>
      <div class="text pull-left">
        On January 29,2020, JAC Motors donated 10 million RMB through the Wuhan Red Cross to
        support the epidemic prevention and control in
        Wuhan; on February 9, JAC Motors donated another 5 million RMB in cash to the Epidemic
        Prevention and Control Emergency Command of
        Anhui Province as a helping hand for the fight
        against epidemic prevention and control. So far,
        15 million RMB in total has been donated and
        continuous support for epidemic prevention and
        control has been offered by JAC Motors.
        <div class="hidden-xs">
          In order to solve the shortage of medical materials, JAC actively coordinated and purchased
          masks to provide assistance to overseas distributors, and made its best efforts to support
          overseas epidemic prevention and control. Up to
          now, JAC has support a total of 50,000 masks to
          Europe, Latin America, Africa and Asia to assist
          overseas distributors in joint anti-epidemic.
        </div>
      </div>
      <div class="img pull-right animate-img">
        <img src="@assets/img/crs/img5.jpg" />
      </div>
      <div class="text visible-xs-block">
        In order to solve the shortage of medical materials, JAC actively coordinated and purchased
        masks to provide assistance to overseas distributors, and made its best efforts to support
        overseas epidemic prevention and control. Up to
        now, JAC has support a total of 50,000 masks to
        Europe, Latin America, Africa and Asia to assist
        overseas distributors in joint anti-epidemic.
      </div>
    </div>
    <div class="img6-container anitmate-container clearfix">
      <div class="title-common">
        Fight against Epidemic with Concrete Actions
      </div>
      <div class="img pull-left animate-img">
        <img src="@assets/img/crs/img6.jpg" />
      </div>
      <div class="text pull-right">
        On January 30, in a response to the requisition of Hefei Emergency
        Command, JAC dispatched a professional emergency fleet to transport
        300 tons of donated vegetables to support Wuhan;
        At the same time, a "Caring Vanguard" charity fleet was established to
        provide free rescue services for anti-epidemic vehicles as well other
        vehicles during the epidemic. Simultaneously, JAC Charity Fleet actively
        coordinated with the government to deliver KN95 masks, infrared
        thermometers, disinfectant, etc. for the prevention of epidemic in
        the field of education.
      </div>
    </div>
    <div class="img7-container anitmate-container clearfix">
      <div class="title-common">
        JAC and its’ Global Distributors Joint Together
        Strongly to Fight the Pandemic
      </div>
      <div class="text-title visible-xs-block">JAC moves in Bolivia</div>
      <div class="img pull-left animate-img">
        <img src="@assets/img/crs/img7.jpg" alt="" />
      </div>
      <div class="text pull-right">
        <div class="text-title hidden-x">JAC moves in Bolivia</div>
        <div class="text1">
          We are very proud that at this moment we could
          provide convenience transportation for those
          people who are still fighting on the front line of
          public safety day and night. Therefore, we have
          undertaken our own social responsibilities and
          provided a fleet of cars and trucks to our government. This fleet will run in Santa Cruz, La Paz, and
          Cochabamba areas for transportation of medical materials.
        </div>
        <div class="img3 animate-img visible-xs-block">
          <img src="@assets/img/crs/img8-3.jpg" />
        </div>
        <div class="text2">
          In addition, we built some small bases on the
          main roads of each city to accept patrol government vehicles that need maintenance and other
          services during quarantine. We cherish those
          people who fight for us at this moment. We are
          very glad that we can provide those help to our
          city. Great thanks for your contribution and we are together.
        </div>
      </div>
    </div>
    <div class="img8-container anitmate-container text-center">
      <div class="img1 animate-img">
        <img src="@assets/img/crs/img8-1.jpg" />
      </div>
      <div class="img2 animate-img">
        <img src="@assets/img/crs/img8-2.jpg" />
      </div>
      <div class="img3 animate-img hidden-xs">
        <img src="@assets/img/crs/img8-3.jpg" />
      </div>
    </div>
    <div class="img9-container anitmate-container clearfix">
      <div class="text text1 pull-left">
        <div class="text-title">JAC moves in Columbia</div>
        <div class="text">
          I am one of you! We thank for those JAC trucks
          who are committed to carittng for and supporting
          the country.
        </div>
      </div>
      <div class="img1 pull-right por">
        <img src="@assets/img/crs/img9-1.jpg" v-show="!showVideo1" />
        <img class="img-player" src="@assets/img/company/play.png" @click="onPlayVideo(1)" v-show="!showVideo1" />
        <video src="@assets/video/crs-1.mp4" id="video1" webkit-playsinline="true" playsinline="true" preload controls @touchend="onPause(1)" v-show="showVideo1"></video>

      </div>
      <div class="img2 pull-left por">
        <img class="img-player" src="@assets/img/company/play.png" @click="onPlayVideo(2)"  v-show="!showVideo2"/>
        <img src="@assets/img/crs/img9-2.jpg" v-show="!showVideo2"/>
        <video src="@assets/video/crs-2.mp4" id="video2" webkit-playsinline="true" playsinline="true" preload controls @touchend="onPause(2)" v-show="showVideo2"></video>
      </div>
      <div class="text text2 pull-right">
        <div class="text-title">JAC moves in Pure</div>
        <div class="text">
          At this difficult moment, we should stay at home and keep confidence.
          This world has hope and surprise anywhere. JAC Peru truck club will
          take the responsibility for our country and our people.
        </div>
      </div>
      <div class="img3 pull-right por">
        <img class="img-player" src="@assets/img/company/play.png" @click="onPlayVideo(3)"  v-show="!showVideo3" />
        <img src="@assets/img/crs/img9-3.jpg" v-show="!showVideo3" />
        <video src="@assets/video/crs-3.mp4" id="video3" preload webkit-playsinline="true" playsinline="true" controls @touchend="onPause(3)" v-show="showVideo3"></video>
      </div>
      <div class="text text3 pull-left">
        <div class="text-title">JAC moves in Chile</div>
        <div class="text">
          We continue to bring hope to Chile
          We thank all truck drivers who are still working
          during the outbreak.
        </div>
      </div>
      <div class="img4 pull-left por">
        <img class="img-player" src="@assets/img/company/play.png" @click="onPlayVideo(4)"  v-show="!showVideo4" />
        <img src="@assets/img/crs/img9-4.jpg" v-show="!showVideo4" />
        <video src="@assets/video/crs-4.mp4" id="video4" preload webkit-playsinline="true" playsinline="true" controls @touchend="onPause(4)" v-show="showVideo4"></video>
      </div>
      <div class="img5 pull-right animate-img">
        <img src="@assets/img/crs/img9-5.jpg" alt="" />
      </div>
      <div class="text text4 pull-left">
        <div class="text-title">JAC moves in Mexico</div>
        <div class="text">
          We are always ready here. Ready to join our
          hands. Fight to overcome any adversity that fate
          may present us. We are proud of being the name
          of JAC.
        </div>
      </div>
      <div class="img6 pull-right por">
        <img class="img-player" src="@assets/img/company/play.png"  @click="onPlayVideo(5)" v-show="!showVideo5" />
        <img src="@assets/img/crs/img9-6.jpg"  v-show="!showVideo5" />
        <video src="@assets/video/crs-5.mp4" id="video5" preload controls webkit-playsinline="true" playsinline="true" @touchend="onPause(5)" v-show="showVideo5"></video>
      </div>
      <div class="text text5 pull-right">
        <div class="text-title">
          JAC launched an event on FB to honor our heroes as a public good
        </div>
        <div class="text">
          In support of the truckers who are still on the front lines
          during the epidemic, JAC teamed up with dealers around
          the world to launch a "Salute to Heroes" campaign to send
          warm gifts and cheer on for their actions.
        </div>
      </div>
      <div class="img7 pull-left por">
        <img class="img-player" src="@assets/img/company/play.png"  @click="onPlayVideo(6)" v-show="!showVideo6" />
        <img src="@assets/img/crs/img9-7.jpg" v-show="!showVideo6" />
        <video src="@assets/video/crs-6.mp4" id="video6" preload controls webkit-playsinline="true" playsinline="true" @touchend="onPause(6)" v-show="showVideo6"></video>
      </div>

      <div class="img8 pull-left por">
        <img class="img-player" src="@assets/img/company/play.png" @click="onPlayVideo(7)"  v-show="!showVideo7" />
        <img src="@assets/img/crs/img9-8.jpg"  v-show="!showVideo7" />
        <video src="@assets/video/crs-7.mp4" id="video7" preload controls webkit-playsinline="true" playsinline="true" @touchend="onPause(7)" v-show="showVideo7"></video>
      </div>

      <div class="text text6 pull-left">
        <div class="text-title">
          JAC launched a“Cherish and Join” event on FB as a public good
        </div>
        <div class="text">
          The sudden outbreak of the epidemic in 2020 has made us
          more united and cherish the love, friendship and family around
          us.JAC initiates the activity of 'Cherish and Join' on social platform, collecting heart-warming stories around us and sending
          encouragement to JAC fans.We call on all of us to cherish our
          lives, pull ourselves together and move forward bravely after
          the epidemic.
        </div>
      </div>
      <div class="img9 pull-right por">
        <img class="img-player" src="@assets/img/company/play.png"  @click="onPlayVideo(8)" v-show="!showVideo8" />
        <img src="@assets/img/crs/img9-9.jpg" v-show="!showVideo8" />
        <video src="@assets/video/crs-8.mp4" id="video8" preload webkit-playsinline="true" playsinline="true" controls @touchend="onPause(8)" v-show="showVideo8"></video>
      </div>
    </div>
    <div class="img10-container anitmate-container">
      <img src="@assets/img/crs/img10.jpg" class="hidden-xs" />
      <img src="@assets/img/crs/img10-wap.jpg"   class="visible-xs-inline" />
    </div>
  </div>
</template>

<script>
import mix from "@mixins/mixin";

export default {
  name: "BrandCRS",
  mixins: [mix]
};
</script>

<style lang="scss" scoped>
@import "~@assets/scss/func.scss";

.crs-container {
  .text {
    font-family: Aileron-Regular;
    font-size: vw(30);
    line-height: vw(52);

    p {
      margin-bottom: vw(22);
    }
  }
  .title-common {
    text-align: center;
    font-family: Cormorant-Bold;
    font-size: vw(60);
    line-height: 1;
  }
  .text-title {
    font-family: Cormorant-Medium;
    font-size: vw(60);
    line-height: 1;
    margin-bottom: vw(60);
  }
  .img1-container {
    margin-bottom: vw(70);
  }
  .text2-container {
    padding-left: vw(173);

    .title {
      font-family: Cormorant-Bold;
      line-height: 1;
    }

    .text2 {
      font-size: vw(36);
      margin-bottom: vw(31);
    }

    .area1 {
      float: left;
      width: vw(720);
      margin-top: vw(70);

      .text1 {
        font-size: vw(72);
        margin-bottom: vw(47);
      }

      .text {
        line-height: vw(48);
        height: vw(135);
      }
    }

    .area2 {
      float: left;
      width: vw(730);
      margin-left: vw(119);
      margin-top: vw(192);
      .text {
        line-height: vw(48);
      }
    }

    .area3 {
      font-size: vw(60);
      margin-top: vw(95);
      margin-bottom: vw(97);
    }

    .area4 {
      font-size: vw(48);
      margin-bottom: vw(57);
    }
  }
  .text3-container {
    width: vw(1700);
    margin: auto;
    padding-top: vw(101);
    padding-bottom: vw(123);
    font-family: Aileron-Regular;
    font-size: vw(30);
    line-height: vw(50);
    .area1 {
      width: vw(790);
      height: vw(394);
    }
    .area2 {
      width: vw(830);
      height: vw(397);
    }
  }
  .img4-container {
    padding-left: vw(110);
    padding-right: vw(110);
    margin-bottom: vw(141);
    height: vw(595);
    .left {
      width: vw(584);
      height: vw(595);
      margin-right: vw(23);
    }
    .mid {
      width: vw(392);
      height: vw(595);
      margin-right: vw(23);
    }
    .right {
      height: vw(595);
      width: vw(676);
    }
  }
  .img5-container {
    margin-bottom: vw(121);
    .text {
      width: vw(659);
      height: vw(974);
      margin-left: vw(113);
      margin-top: vw(58);
      line-height: vw(52);
    }
    .img {
      width: vw(1049);
      height: vw(962);
      margin-top: vw(63);
    }
  }
  .img6-container {
    margin-bottom: vw(105);
    .img {
      width: vw(661);
      height: vw(409);
      margin-top: vw(44);
      margin-left: vw(112);
    }
    .text {
      width: vw(934);
      height: vw(444);
      margin-top: vw(43);
      margin-right: vw(113);
      line-height: vw(51);
    }
  }
  .img7-container {
    margin-bottom: vw(167);
    .title-common {
      height: vw(167);
      width: vw(1210);
      margin: 0 auto;
      line-height: vw(87);
      margin-bottom: vw(52);
    }
    .img {
      width: vw(1049);
      height: vw(966);
    }
    .text {
      width: vw(657);
      height: vw(972);
      margin-right: vw(120);
      line-height: vw(51);
    }
  }
  .img8-container {
    img {
      height: vw(507);
    }
    .img1 {
      width: vw(356);
      margin-right: vw(23);
    }
    .img2 {
      width: vw(558);
      margin-right: vw(23);
    }
    .img3 {
      width: vw(738);
    }
  }
  .img9-container {
    padding: 0 vw(110);
    margin-bottom: vw(169);

    .text1 {
      width: vw(661);
      height: vw(238);
      margin-top: vw(223);
      line-height: vw(43);
    }
    .img1 {
      width: vw(939);
      height: vw(539);
      margin-top: vw(169);
    }
    .img2 {
      width: vw(662);
      height: vw(817);
      margin-top: vw(135);
    }
    .text2 {
      width: vw(937);
      height: vw(233);
      margin-top: vw(134);
      line-height: vw(43);
    }
    .img3 {
      width: vw(939);
      height: vw(534);
      margin-top: vw(66);
      margin-bottom: vw(101);
    }
    .text3 {
      width: vw(621);
      height: vw(237);
      margin-top: vw(126);
      line-height: vw(43);
    }
    .img4 {
      width: vw(940);
      height: vw(529);
      margin-top: vw(65);
    }
    .img5 {
      width: vw(659);
      height: vw(529);
      margin-top: vw(65);
    }
    .text4 {
      width: vw(648);
      height: vw(281);
      margin-top: vw(185);
      line-height: vw(43);
    }
    .img6 {
      width: vw(939);
      height: vw(532);
      margin-top: vw(49);
    }
    .img7 {
      width: vw(799);
      height: vw(442);
      margin-top: vw(170);
    }
    .text5,
    .text6 {
      .text-title {
        line-height: vw(85);
        height: vw(166);
      }
      line-height: vw(43);
    }
    .text5 {
      width: vw(794);
      margin-top: vw(336);
      margin-bottom: vw(447);
    }
    .img8 {
      width: vw(799);
      height: vw(442);
      margin-top: vw(45);
    }
    .img9 {
      width: vw(803);
      height: vw(916);
      margin-top: vw(-381);
    }
    .text6 {
      width: vw(837);
      margin-top: vw(66);
    }
  }
  .img10-container {
    margin-bottom: vw(242);
  }
}
@media screen and (max-width: 767px) {
  .crs-container {
    .text {
      font-size: wp(28);
      line-height: wp(48);
    }
    .title-common {
      text-align: left;
      font-size: wp(60);
      line-height: wp(70);
    }
    .text-title {
      font-size: wp(48);
      line-height: wp(56);
      margin-bottom: wp(50);
    }
    .img1-container {
      margin-bottom: wp(48);
    }
    .text2-container,
    .text3-container,
    .img4-container,
    .img5-container,
    .img6-container,
    .img7-container,
    .img8-container,
    .img9-container,
    .img10-container,
    .paddingwap {
      padding: 0 wp(40);
    }
    .text2-container {

      .title {
        font-size: wp(60);
        margin-bottom: wp(46);
      }

      .text2 {
        font-size: wp(48);
        margin-bottom: wp(17);
      }

      .area1 {
        float: none;
        width: 100%;
        margin-top: 0;

        .text1 {
          font-size: wp(60);
          margin-bottom: wp(46);
        }

        .text {
          line-height: wp(60);
          height: wp(169);
        }
      }

      .area2 {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-top: wp(47);
        .text {
          line-height: wp(60);
        }
      }

      .area3 {
        text-align: left;
        font-size: wp(60);
        margin-top: wp(67);
        margin-bottom: wp(47);
      }

      .area4 {
        text-align: left;
        font-family: Cormorant-Regular;
        font-size: wp(48);
        line-height: wp(60);
        margin-bottom: wp(47);
      }
    }
    .text3-container {
      width: 100%;
      margin: auto;
      padding-top: wp(48);
      padding-bottom: wp(45);
      font-size: wp(28);
      line-height: wp(48);
      .area1 {
        width: 100%;
        height: wp(417);
      }

    }
    .img4-container {
      margin-bottom: wp(69);
      height: auto;
      .left {
        width: 100%;
        height: wp(595);
        margin-right: 0;
      }
      .mid {
        width: wp(240);
        height: wp(372);
        margin-right: wp(10);
      }
      .right {
        height: wp(372);
        width: wp(420);
      }
    }
    .img5-container {
      margin-bottom: wp(67);

      .title-common {
        margin-bottom: wp(30);
      }

      .text {
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-top: 0;
        line-height: wp(48);
      }

      .img {
        width: 100%;
        height: auto;
        margin-top: wp(45);
        margin-bottom: wp(45);
      }
    }
    .img6-container {
      margin-bottom: wp(47);
      .img {
        width: 100%;
        height: auto;
        margin-top: wp(47);
        margin-left: 0;
      }
      .text {
        width: 100%;
        height: 100%;
        margin-top: wp(47);
        margin-right: 0;
        line-height: wp(48);
      }
    }
    .img7-container {
      margin-bottom: wp(48);
      .title-common {
        height: auto;
        width: 100%;
        margin: 0 0 wp(47);
        line-height: wp(70);
      }
      .img {
        width: 100%;
        height: auto;
      }
      .text {
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-top: wp(37);
        line-height: wp(48);
      }
      .text-title {
        font-family: Cormorant-Medium;
        font-size: wp(48);
        margin-bottom: wp(47);
      }
      .img3 {
        margin-top: wp(48);
        margin-bottom: wp(48);
      }
    }
    .img8-container {
      img {
        height: wp(363);
      }
      .img1 {
        width: wp(255);
        margin-right: wp(16);
      }
      .img2 {
        width: wp(399);
        margin-right: 0;
      }
    }
    .img9-container {
      margin-bottom: wp(48);

      .text1 {
        width: 100%;
        height: auto;
        margin-top: wp(50);
      }

      .img1,
      .img2,
      .text2,
      .img3,
      .text3,
      .img4,
      .img5,
      .text4,
      .img6,
      .img7,
      .text5,
      .text6,
      .img8,
      .img9 {
        width: 100%;
        height: auto;
        margin-top: wp(48);
        margin-bottom: 0;
        .text-title {
          line-height: wp(70);
          height: auto;
          margin-bottom: wp(47);
        }
      }



    }
    .img10-container {
      margin-bottom: wp(248);
    }
  }
}
</style>
